<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
	<script type="text/javascript" src="__XIAOHE__/js/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	 crossorigin="anonymous"></script>
	<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/bootstrap.min.css" media="screen" />
	<script src="__XIAOHE__/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/style.css" />
	<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/swiper.min.css" />
	<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/animate.css" />
	<link rel="stylesheet" type="text/css" href="__XIAOHE__/css/font-awesome.min.css" />
	<!-- 引入样式文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<div id="app">
		<div class="form-group">
			<label class="control-label col-xs-12 col-sm-2">自定义标签:</label>
			<div class="col-xs-12 col-sm-2">
				<van-cell-group>
					<van-field v-model="value" placeholder="" />
				</van-cell-group>
			</div>
			<div class="col-xs-12 col-sm-2">
				<div id="danxuan" @click="danxuan" class="btn btn-success btn-embossed">
					单选
				</div>
				<div id="shurukaung" @click="shurukaung" class="btn btn-default btn-embossed">
					输入框
				</div>
			</div>
		</div>
		<div class="form-group" v-for="(value1,key1) in list">
			<div v-if="value1.type == '1'">
				<label class="control-label col-xs-12 col-sm-2">{{value1.name}}:</label>
				<div class="col-xs-12 col-sm-4">
					<van-cell-group>
						<van-field placeholder="" />
					</van-cell-group>
				</div>
				<div class="col-xs-12 col-sm-1">
					<div id="danxuan" @click="shanchu(key1)" class="btn btn-danger btn-import">
						删除
					</div>
				</div>
			</div>
			<div v-else-if="value1.type == '2'">
				<label class="control-label col-xs-12 col-sm-2">{{value1.name}}:</label>
				<div class="col-xs-12 col-sm-4">
					<div v-for="(value2,key2) in value1.dxt">
						<div class="col-xs-12 col-sm-8">
							<div class="hyyjfk2aa" style="padding: .05rem;">
								<van-radio-group v-model="value1.radio">
									<van-radio :name='key2'><span v-html='value2.name'></span></van-radio>
								</van-radio-group>
							</div>
						</div>
						<div class="col-xs-12 col-sm-4">
							<div id="danxuan" @click="shanchudx(key1,key2)" class="btn btn-danger btn-import">
								删除单选
							</div>
						</div>
					</div>
					<div>
						<div class="col-xs-12 col-sm-8">
							<van-cell-group>
								<van-field v-model="value1.value" placeholder="" />
							</van-cell-group>
						</div>
						<div class="col-xs-12 col-sm-4">
							<div id="danxuan" @click="danxuandx(key1)" class="btn btn-success btn-embossed">
								增加单选
							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-sm-1">
					<div id="danxuan" @click="shanchu(key1)" class="btn btn-danger btn-import">
						删除
					</div>
				</div>
			</div>
		</div>
		<!-- <div id="danxuan" @click="daying" class="btn btn-success btn-embossed">
			打印
		</div> -->
	</div>


	<div class="form-group layer-footer">
		<label class="control-label col-xs-12 col-sm-2"></label>
		<div class="col-xs-12 col-sm-8">

			<button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
			<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
		</div>
	</div>
</form>
<script>
	new Vue({
		el: '#app',
		data: function() {
			return {
				value: null,
				value2: null,
				list: [
					// {
					// 	name: '您最喜欢的部分是什么？',
					// 	radio: null,
					// 	input: null,
					// 	type: 2,
					// 	dxt: [{
					// 			name: '团操课'
					// 		},
					// 		{
					// 			name: '私教课'
					// 		},
					// 		{
					// 			name: '有氧区'
					// 		},
					// 		{
					// 			name: '力量区'
					// 		},
					// 		{
					// 			name: '泳池区'
					// 		},
					// 		{
					// 			name: '其他'
					// 		}
					// 	]
					// },
					// {
					// 	name: '您对我们还有什么建议',
					// 	type: 1,
					// }
				] //渲染在这里
			}
		},

		methods: {
			shurukaung() {
				var that = this
				var list = that.list
				var value = that.value
				var shurukaung = {
					name: value,
					input: null,
					type: 1
				}
				list.push(shurukaung)
				that.list = list
				that.value = null
			},
			danxuan() {
				var that = this
				var list = that.list
				var value = that.value
				var shurukaung = {
					name: value,
					radio: null,
					type: 2,
					value: null,
					dxt: []
				}
				list.push(shurukaung)
				that.list = list
				that.value = null
			},
			shanchu(key) {
				var that = this
				var list = that.list
				list.splice(key, 1)
				that.list = list
			},
			shanchudx(key1, key2) {
				var that = this
				var list = that.list
				list[key1].dxt.splice(key2, 1)
				that.list = list
			},
			danxuandx(key1) {
				var that = this
				var list = that.list
				var value = list[key1].value
				list[key1].dxt.push({
					name: value
				})
				list[key1].value = null
				that.list = list
			},
			daying() {
				var that = this
				var list = that.list
				console.log(list)
			}
		}
	})
</script>
